<template>
	<el-card shadow="hover" style="flex: 1.5; margin-left: 20px">
		<view slot="header" class="header">
			<i class="icon el-icon-s-data"></i>
			<text>消费用户统计</text>
		</view>
		<view class="box-card-body" style="height: 300px">
			<view id="chartUserPay" class="chart"></view>
		</view>
	</el-card>
</template>

<script>
import * as echarts from "echarts"

export default {
	name: "chartUserPay",
	data() {
		return {}
	},
	mounted() {
		this.init()
	},
	methods: {
		async init() {
			const res = await vk.callFunction({
				url: "admin/business/kh.stats.chartUserPay"
			})
			// 渲染图表
			let myChart = echarts.getInstanceByDom(document.getElementById("chartUserPay"))
			if (myChart == null) {
				// 如果不存在，就进行初始化。
				myChart = echarts.init(document.getElementById("chartUserPay"))
			}
			var colorList = [
				{
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "#C478FA" },
						{ offset: 1, color: "#5272FE" }
					]
				},
				{
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "#FACB36" },
						{ offset: 1, color: "#FCBE2E" }
					]
				},
				{
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{ offset: 0, color: "#3ED89B" },
						{ offset: 1, color: "#59EBD7" }
					]
				}
			]
			let option = {
				tooltip: { trigger: "item" },
				legend: { orient: "vertical", left: "left" },
				series: [
					{
						type: "pie",
						radius: ["25%", "60%"],
						itemStyle: { borderRadius: 6, borderColor: "#fff", borderWidth: 2,
							color: function(params) {
								return colorList[params.dataIndex]
							} },
						data: [
							{ value: res.list[0], name: "消费一次" },
							{ value: res.list[1], name: "消费多次" },
							{ value: res.list[2], name: "暂未消费" }
						]
					}
				]
			}
			myChart.setOption(option)
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/ .el-card__header {
	padding: 14px 16px !important;
}

/deep/ .el-card__body {
	padding: 14px 14px 6px !important;
}

.header {
	display: flex;
	align-items: center;
	font-size: 14px;
	.icon {
		border-radius: 50%;
		border: 5px solid rgb(230, 247, 255);
		background-color: rgb(230, 247, 255);
		color: rgb(24, 144, 255);
		margin-right: 6px;
	}
}

.chart {
	width: 100%;
	height: 100%;
}
</style>
